<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="../style/editor.css" rel="stylesheet" type="text/css">
    <script>
        var sLangDir = parent.oUtil.langDir;
        document.write("<scr" + "ipt src='language/" + sLangDir + "/webtextcomplete.js'></scr" + "ipt>");
    </script>
    <script>writeTitle()</script>

    <script src="jquery-1.7.min.js" type="text/javascript"></script>

    <!--Slider-->
    <link href="fd-slider/css/skin.css" rel="stylesheet" type="text/css" />
    <script src="fd-slider/js/fd-slider.js" type="text/javascript"></script>

    <!--Spectrum-->
    <script src="spectrum/spectrum.js" type="text/javascript"></script>
    <link href="spectrum/spectrum.css" rel="stylesheet" type="text/css" />

    <!--MiniColors-->
    <script src="minicolors/jquery.miniColors.min.js" type="text/javascript"></script>
    <link href="minicolors/jquery.miniColors.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        
    .item {width:180px;min-height:99px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 100px;
    background:#fff;border:#fff 7px solid;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    margin-left:-5px;margin-right:25px;margin-top:10px;margin-bottom:10px;
    border:#fff 1px solid;padding:5px;
    }

    .itemsize {background:#fff;border:#fff 1px solid;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);margin-left:-5px;margin-right:15px;margin-bottom:13px}
    
    .item-l {width:200px;min-height:40px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 40px;
    background:#fff;border:#fff 7px solid;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    margin-left:-4px;margin-bottom:20px;
    border:#fff 1px solid;padding:5px 0px;
    
    	-moz-box-shadow:0 3px 5px #999;
	-webkit-box-shadow:0 3px 5px #999;
	-moz-border-radius:0px;
	-webkit-border-radius:0px; 
    }
    .item-c {width:200px;min-height:100px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 100px;
    background:#fff;border:#fff 7px solid;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    margin-left:-4px;margin-bottom:20px;
    border:#fff 1px solid;padding:5px 0px;
    	-moz-box-shadow:0 3px 5px #999;
	-webkit-box-shadow:0 3px 5px #999;
	-moz-border-radius:0px;
	-webkit-border-radius:0px; 
    }
    .item-r {width:200px;min-height:100px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 100px;
    background:#fff;border:#fff 7px solid;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
    margin-left:-4px;margin-right:25px;margin-bottom:20px;
    border:#fff 1px solid;padding:5px 0px;
    	-moz-box-shadow:0 3px 5px #999;
	-webkit-box-shadow:0 3px 5px #999;
	-moz-border-radius:0px;
	-webkit-border-radius:0px; 
    }
    </style>

    <script src="common.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var sHTML3 = '';

        var arrParagraphs = [[getTxt("Heading 1"), "H1"], [getTxt("Heading 2"), "H2"], [getTxt("Heading 3"), "H3"], [getTxt("Heading 4"), "H4"], [getTxt("Heading 5"), "H5"], [getTxt("Heading 6"), "H6"], [getTxt("Preformatted"), "PRE"], [getTxt("Normal"), "P"]];
        //,["Heading 5", "H5"],["Heading 6", "H6"],["Normal (DIV)", "DIV"]

        for (var i = 0, len = arrParagraphs.length; i < len; i++) {
            sHTML3 += '<div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyHeading(\'' + arrParagraphs[i][1] + '\')" style="text-align:center;margin-left:-2px;margin-right:20px;cursor:pointer;font-size:13px;white-space:nowrap">' +
                '<' + arrParagraphs[i][1] + '>' + arrParagraphs[i][0] + '</' + arrParagraphs[i][1] + '>' +
                '</div>';
        }

        var sHTML4 = '';
        sHTML4 += '<div onmouseover="over(this)" onmouseout="out(this)" class="itemsize" onclick="I_FormatText(\'font-size\',\'\')" style="text-align:center;margin-top:10px;margin-left:-2px;width:398px;padding-top:10px;padding-bottom:10px;cursor:pointer;font-size:14px;background:#ddd;">' +
                getTxt('DEFAULT SIZE') +
                '</div>';

        sHTML4 += '<table><tr>';
        var arrSizes = [7, 8, 9, 10, 11, 12, 14];
        for (var i = 0, len = arrSizes.length; i < len; i++) {
            sHTML4 += '<td valign="bottom">';
            sHTML4 += '<table class="itemsize" onmouseover="over(this)" onmouseout="out(this)" onclick="I_Size(' + arrSizes[i] + ')" style="width:45px;text-align:center;cursor:pointer;">' +
                '<tr><td valign="bottom" style="font-size:' + arrSizes[i] + 'px;">ab<div style="font-size:12px">' + arrSizes[i] + '</div>' +
                '</td></tr></table>';
            sHTML4 += '</td>'
        }
        sHTML4 += '</tr></table>';

        sHTML4 += '<table><tr>';
        var arrSizes = [16, 18, 21, 24, 36, 40];
        for (var i = 0, len = arrSizes.length; i < len; i++) {
            sHTML4 += '<td valign="bottom">';
            sHTML4 += '<table class="itemsize" onmouseover="over(this)" onmouseout="out(this)" onclick="I_Size(' + arrSizes[i] + ')" style="width:55px;text-align:center;cursor:pointer;">' +
                '<tr><td valign="bottom" style="font-size:' + arrSizes[i] + 'px;">ab<div style="font-size:12px">' + arrSizes[i] + '</div>' +
                '</td></tr></table>';
            sHTML4 += '</td>'
        }
        sHTML4 += '</tr></table>';

        sHTML4 += '<table><tr>';
        var arrSizes = [48, 60, 72];
        for (var i = 0, len = arrSizes.length; i < len; i++) {
            sHTML4 += '<td valign="bottom">';
            sHTML4 += '<table class="itemsize" onmouseover="over(this)" onmouseout="out(this)" onclick="I_Size(' + arrSizes[i] + ')" style="width:124px;text-align:center;cursor:pointer;">' +
                '<tr><td valign="bottom" style="font-size:' + arrSizes[i] + 'px;">ab<div style="font-size:12px">' + arrSizes[i] + '</div>' +
                '</td></tr></table>';
            sHTML4 += '</td>'
        }
        sHTML4 += '</tr></table>';

        sHTML4 += '<table><tr>';
        var arrSizes = [90, 100, 115];
        for (var i = 0, len = arrSizes.length; i < len; i++) {
            sHTML4 += '<td valign="bottom">';
            sHTML4 += '<table class="itemsize" onmouseover="over(this)" onmouseout="out(this)" onclick="I_Size(' + arrSizes[i] + ')" style="width:105px;text-align:center;cursor:pointer;">' +
                '<tr><td valign="bottom" style="font-size:' + arrSizes[i] + 'px;">ab<div style="font-size:12px">' + arrSizes[i] + '</div>' +
                '</td></tr></table>';
            sHTML4 += '</td>'
        }
        sHTML4 += '</tr></table>';

        jQuery(document).ready(function ($) {

            $('#divHeadings').html(sHTML3);
            $('#divSizes').html(sHTML4);

            loadTxt(); /* language */

            if (!isiPad) {
                $("#txtColor").miniColors({ change: function (hex, rgb) {
                    I_ApplyForeColor(hex)
                }
                });

                $("#txtBgColor").miniColors({ change: function (hex, rgb) {
                    I_ApplyBgColor(hex)
                }
                });
            };

        });

        var storeBgColor, storeColor;
        function over(me,hover) {
            storeBgColor = me.style.backgroundColor;
            if (!hover) me.style.backgroundColor = '#c90000';
            else me.style.backgroundColor = hover;
            storeColor = me.style.color;
            me.style.color = '#fff';
        }
        function out(me) {
            me.style.backgroundColor = storeBgColor;
            me.style.color = storeColor;
        }

        function tabClick(n) {
            $("#div0").css("display", "none");
            $("#tab0").css("background", "#ccc");
            $("#div1").css("display", "none");
            $("#tab1").css("background", "#ccc");
            $("#div2").css("display", "none");
            $("#tab2").css("background", "#ccc");
            $("#div3").css("display", "none");
            $("#tab3").css("background", "#ccc");
            $("#div4").css("display", "none");
            $("#tab4").css("background", "#ccc");
            $("#div5").css("display", "none");
            $("#tab5").css("background", "#ccc");

            $("#div"+n).css("display", "block");
            $("#tab"+n).css("background", "#fcfcfc");
        }
    </script>

</head>
<body style="margin-top:12px;margin-left:10px">

<div id="tab2" onclick="tabClick(2)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:45px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#fcfcfc;margin-left:22px;margin-top:7px">
    SIZE
</div> 
<div id="tab3" onclick="tabClick(3)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:75px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    SHADOWS
</div>
<div id="tab4" onclick="tabClick(4)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:105px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    PARAGRAPHS
</div>
<div id="tab5" onclick="tabClick(5)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:80px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    LISTINGS
</div>
<div style="clear:left"></div>

<table cellpadding="0" cellspacing="0" style="margin-left:7px;">
<tr>
<td>

    <div id="div2" style="color:#000;padding:7px 20px;padding-right:0px;width:445px;height:395px;overflow:auto;border-top:none;background:#fcfcfc;">
        <div id="divSizes"></div>        
    </div>

    <div id="div3" style="color:#000;padding:7px 20px;padding-right:0px;width:445px;height:395px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <p id="lblNote">This feature is not currently supported in IE.</p>
        <div onmouseover="over(this,'#333')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(0)" style="cursor:pointer;text-align:center;background:#474747;">
        <div style="font-size:55px;color:#222;text-shadow: 0px 2px 3px #666;line-height:38px;margin-top:5px;"><div style="font-size:18px">LETER</div>Press</div>
        </div>
        <div onmouseover="over(this,'#eee')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(1)" style="cursor:pointer;text-align:center;background:#fafafa;">
        <div style="font-size:40px;color:#9c1414;font-weight: bold;text-shadow:4px 4px 0px rgba(255,255,255,.8), 10px 10px 0px rgba(187,187,187,0.5);margin-top:10px">Retro</div>
        </div>
        <div onmouseover="over(this,'#eb1257')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(2)" style="cursor:pointer;text-align:center;background:#ff2e70;">
        <div style="font-family:sans-serif;font-size:70px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">3D</div>
        </div>

        <div onmouseover="over(this,'#d9e3cc')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(7)" style="cursor:pointer;text-align:center;background:#e1e6da;">
        <span style="font-size:30px;color:#fff;text-shadow:0px 3px 0px #b2a98f,0px 14px 10px rgba(0,0,0,0.15),0px 24px 2px rgba(0,0,0,0.1),0px 34px 30px rgba(0,0,0,0.1);line-height:30px"><div style="font-size:25px">DOWN &</div> Distant</span>
        </div>

        <div onmouseover="over(this,'#eee')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(4)" style="cursor:pointer;text-align:center;background:#fff;">
        <div style="font-size:50px;color:#de0d0d;text-shadow:2px 4px 3px rgba(0,0,0,0.3);margin-top:20px">Basic</div>
        </div>
        <div onmouseover="over(this,'#eee')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(5)" style="cursor:pointer;text-align:center;background:#f7f7f7;">
        <span style="font-size:45px;color:#04cfcf;text-shadow:2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);line-height:45px">Soft Emboss</span>
        </div>
        <div onmouseover="over(this,'#eee')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(6)" style="cursor:pointer;text-align:center;background:#f7f7f7;">
        <span style="font-size:40px;color:#007bd9;text-shadow:0px 15px 5px rgba(0,0,0,0.1),10px 20px 5px rgba(0,0,0,0.05),-10px 20px 5px rgba(0,0,0,0.05);line-height:45px">Multi Light</span>
        </div>

        <div onmouseover="over(this,'#9cbab0')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(3)" style="cursor:pointer;text-align:center;background:#b1cbc2;">
        <div style="font-size:35px;color:#A4536A;text-shadow:-4px -2px 0 #fff;line-height:45px;"><div style="font-size:18px">HARD</div>Shadow</div>
        </div>

        <div onmouseover="over(this,'#ddd')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(8)" style="cursor:pointer;text-align:center;background:#cfcfcf;padding-top:-40px;">
        <div style="color:#111;text-shadow:6px 6px 0px rgba(0,0,0,0.2);line-height:45px;"><div style="font-size:18px">HARD</div>Shadow</div>
        </div>
        <div onmouseover="over(this,'#333')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(11)" style="cursor:pointer;text-align:center;background:#474747;">
        <div style="font-size:55px;color:#222;text-shadow:rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;line-height:38px;margin-top:5px;"><div style="font-size:18px">LETER</div>Press</div>
        </div>
        <div onmouseover="over(this,'#aaa')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(10)" style="cursor:pointer;text-align:center;background:#c4c4c4;">
        <div style="font-size:45px;color:#bf0000;text-shadow:1px 1px 1px rgba(255,255,255,0.6);margin-top:15px">Basic</div>
        </div>
        <div onmouseover="over(this,'#f3f3f3')" onmouseout="out(this)" class="item" onclick="I_ApplyShadow(9)" style="cursor:pointer;text-align:center;background:#fff;">
        <div style="font-size:45px;color:#111;text-shadow:0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);margin-top:15px">Heavy</div>
        </div>
    </div>

    <div id="div4" style="color:#000;padding:7px 20px;padding-right:0px;width:445px;height:395px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <div id="divHeadings"></div>
    </div>

    <div id="div5" style="color:#000;padding:7px 20px;padding-right:0px;width:445px;height:395px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">

        <!--
        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/arrow.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/arrow.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/bookmark.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/bookmark.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/calendar.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/calendar.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/document.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/document.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/flag.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/flag.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/heart.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/heart.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/light-bulb.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/light-bulb.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/paper-plane.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/paper-plane.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/tick.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/tick.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square','common/images/user.png')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;list-style-image:url('images/user.png')" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>
        -->


        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('disc')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;" type="disc">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('circle')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;" type="circle">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyUnOrderedList('square')" style="cursor:pointer;">
            <ul style="font-family:Century Gothic, sans-serif;font-size:14px;" type="square">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ul>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyOrderedList('A')" style="cursor:pointer;">
            <ol style="font-family:Century Gothic, sans-serif;font-size:14px;" type="A">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ol>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyOrderedList('a')" style="cursor:pointer;">
            <ol style="font-family:Century Gothic, sans-serif;font-size:14px;" type="a">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ol>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyOrderedList('I')" style="cursor:pointer;">
            <ol style="font-family:Century Gothic, sans-serif;font-size:14px;" type="I">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ol>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyOrderedList('i')" style="cursor:pointer;">
            <ol style="font-family:Century Gothic, sans-serif;font-size:14px;" type="i">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ol>        
        </div>

        <div onmouseover="over(this)" onmouseout="out(this)" class="item" onclick="I_ApplyOrderedList('1')" style="cursor:pointer;">
            <ol style="font-family:Century Gothic, sans-serif;font-size:14px;" type="1">
            <li>Lorem ipsum fierent.</li>
            <li>Tale modus iuvaret.</li>
            </ol>        
        </div>

    </div>


</td>
<td style="padding-left:20px">

       <div style="margin-top:15px">
            <div id="divBold" onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-l" onclick="I_DoCmd('Bold')" style="background:url('images/edit-bold.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-c" onclick="I_DoCmd('Italic')" style="background:url('images/edit-italic.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-c" onclick="I_DoCmd('Underline')" style="background:url('images/edit-underline.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-r" onclick="I_DoCmd('Strikethrough')" style="background:url('images/edit-strike.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>

            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-l" onclick="I_DoCmd('Subscript')" style="background:url('images/edit-subscript.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-c" onclick="I_DoCmd('Superscript')" style="background:url('images/edit-superscript.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-c" onclick="I_SmallCaps()" style="background:url('images/edit-all-caps.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-c" onclick="I_TextTransform('uppercase')" style="background:url('images/edit-uppercase.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
            </div>
            <div onmouseover="over(this,'#cddb4c')" onmouseout="out(this)" class="item-r" onclick="I_TextTransform('lowercase')" style="background:url('images/edit-lowercase.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;margin-right:0px">
            </div>
        </div>

        <table cellpadding="0" cellspacing="0" style="margin-top:30px;">
        <tr>
        <td style="padding-bottom:12px;font-size:10px;letter-spacing:1px" id="lblColor">COLOR:</td>
        <td style="padding-bottom:12px;">        
            <span style="font-family:Arial;cursor:pointer" onclick="$('#txtColor').val('');I_ApplyForeColor('')">[x]</span> &nbsp;&nbsp;
        </td>
        <td style="padding-bottom:12px;"> 
            <input type="text" id="txtColor" class="basic" style="width:55px;height:21px" value="" />
            <script>
                if (isiPad) $("#txtColor").spectrum({
                    color: '#ffffff',
                    change: function (color) {
                        var hsv = color.toHsv();
                        var rgb = color.toRgbString();
                        var hex = color.toHexString();
                        I_ApplyForeColor(hex);
                    },
                    show: function () {

                    },
                    hide: function () {

                    }
                });
            </script>
        </td>
        </tr>
        <tr>
        <td style="padding-bottom:12px;font-size:10px;letter-spacing:1px;padding-right:7px" id="lblHighlight">HIGHLIGHT:</td>
        <td style="padding-bottom:12px;">
            <span style="font-family:Arial;cursor:pointer"  onclick="$('#txtBgColor').val('');I_ApplyBgColor('')">[x]</span> &nbsp;&nbsp;
        </td>
        <td style="padding-bottom:12px;"> 
            <input type="text" id="txtBgColor" class="basic" style="width:55px;height:21px" value="" />
            <script>
                if (isiPad) $("#txtBgColor").spectrum({
                    color: '#ffffff',
                    change: function (color) {
                        var hsv = color.toHsv();
                        var rgb = color.toRgbString();
                        var hex = color.toHexString();
                        I_ApplyBgColor(hex);
                    },
                    show: function () {

                    },
                    hide: function () {

                    }
                });
            </script>
        </td>
        </tr>
        </table>
    
        <div style="border-top:#fff 1px solid;border-bottom:#ccc 1px solid;margin-top:10px;margin-bottom:20px;margin-left:0px;width:250px"></div>

        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-l" onclick="I_DoCmd('JustifyLeft')" style="background:url('images/edit-alignment.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-c" onclick="I_DoCmd('JustifyCenter')" style="background:url('images/edit-alignment-center.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-c" onclick="I_DoCmd('JustifyRight')" style="background:url('images/edit-alignment-right.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-r" onclick="I_DoCmd('JustifyFull')" style="background:url('images/edit-alignment-justify.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-l" onclick="I_DoCmd('InsertUnOrderedList')" style="background:url('images/edit-list.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-r" onclick="I_DoCmd('InsertOrderedList')" style="background:url('images/edit-list-order.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-l" onclick="I_DoCmd('Indent')" style="background:url('images/edit-indent.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>
        <div onmouseover="over(this,'#e9ed03')" onmouseout="out(this)" class="item-r" onclick="I_DoCmd('Outdent')" style="background:url('images/edit-outdent.png') #f7f7f7 5px 5px no-repeat;cursor:pointer;width:28px;min-height:15px;text-align:center;margin-bottom:0px;">
        </div>


        <table cellpadding="0" cellspacing="0" style="width:100%;margin-top:25px;">
        <tr>
        <td style="padding-bottom:7px;font-size:10px;letter-spacing:1px">
            <span id="lblLineHeight">LINE HEIGHT:</span> <span id="valLineHeight"></span><br />
            <input name="inpLineHeight" id="inpLineHeight" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="14" />
	        <script language="javascript">
	            var i1 = 0;
	            /*fdSlider.createSlider({
	            inp: document.getElementById("inpLineHeight"),
	            step: "1",
	            maxStep: 1,
	            min: 0,
	            max: 100,
	            animation: "timed"
	            });*/

	            fdSlider.addEvent(document.getElementById("inpLineHeight"), "change", function (e) {
	                if (i1 == 2) { I_FormatText('line-height', $("#inpLineHeight").val() + 'px'); $("#valLineHeight").html($("#inpLineHeight").val() + 'px') }
	                if (i1 != 2) i1 += 1;
	            });
   	        </script>
        </td>
        </tr>
        <tr>
        <td style="padding-bottom:7px;font-size:10px;letter-spacing:1px">
            <span id="lblLetterSpacing">LETTER SPACING:</span> <span id="valLetterSpacing"></span><br />
            <input name="inpCharSpacing" id="inpCharSpacing" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="0" />
	        <script language="javascript">
	            var i2 = 0;
	            fdSlider.addEvent(document.getElementById("inpCharSpacing"), "change", function (e) {
	                if (i2 == 2) { I_FormatText('letter-spacing', $("#inpCharSpacing").val() + 'px'); $("#valLetterSpacing").html($("#inpCharSpacing").val() + 'px') }
	                if (i2 != 2) i2 += 1;
	            });
   	        </script>
        </td>
        </tr>
        <tr>
        <td style="padding-bottom:7px;font-size:10px;letter-spacing:1px">
            <span id="lblWordSpacing">WORD SPACING:</span> <span id="valWordSpacing"></span><br />
            <input name="inpWordSpacing" id="inpWordSpacing" type="range" min="0" max="30" step="1" title="Range: 0 to 30 in steps of 1" value="0" />
	        <script language="javascript">
	            var i3 = 0;
	            fdSlider.addEvent(document.getElementById("inpWordSpacing"), "change", function (e) {
	                if (i3 == 2) { I_FormatText('word-spacing', $("#inpWordSpacing").val() + 'px'); $("#valWordSpacing").html($("#inpWordSpacing").val() + 'px') }
	                if (i3 != 2) i3 += 1;
	            });
   	        </script>
        </td>
        </tr>
        </table>

</td>
</tr>
</table>

</body>
</html>
